<template>
  <div class="product">
    <!-- 头部导航栏区域 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          :title="$route.query.name"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
      <van-sticky>
        <div class="top">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value" :options="secondList" @change="secondChange" />
          </van-dropdown-menu>
        </div>
      </van-sticky>
    </div>
    <div class="content">
      <!-- 左侧导航栏区域 -->
      <div class="left">
        <van-sidebar v-model="activeKey" class="vanSider" @change="thirdChange">
          <van-sidebar-item
            :title="category.cat_name"
            v-for="category in thirdList"
            :label="category.cat_name"
            :value="category.cat_id"
            :key="category.cat_id"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <!-- 右侧产品展示区域 -->
        <div class="right">
          <Card v-for="good in goodsList" :key="good.goods_id" :good="good" />
        </div>
      </div>
    </div>
    <!-- <div class="bottom">
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit(total)"
        button-color="purple"
      />
    </div>-->
  </div>
</template>

<script>
//引入辅助函数信息
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
import Card from '@/components/goodsCard.vue'
export default {
  components: { Card },
  data() {
    return {
      // 左侧导航栏索引值
      activeKey: 0,
      //传递栏目id
      categoryId: this.$route.query.id,
      firstList: [],
      secondList: [],
      thirdList: [],
      allGoods: [],
      goodsList: [],
      value: 0,
      cat_id: 0,
    };
  },
  computed: {
    //使用辅助函数
    //获取栏目数据
    // ...mapState("category", ["categoryData"]),
    //获取产品数据
    // ...mapState("product", ["productData"]),
    //获取购物车数据
    // ...mapGetters("shopcart", ["total"]),
  },
  methods: {
    //引入产品栏目数据
    // ...mapActions("category", ["getAllCategoryData"]),
    //引入根据栏目id获取产品数据的方法
    // ...mapActions("product", ["getAllProductData"]),
    // 引入购物车模块的方法
    // ...mapMutations("shopcart", ["addShopcart", "clearShopcart"]),
    async queryCategory() {
      await this.axios.get('categories').then(res => {
        let value = 0
        this.secondList = res.data.data[this.$route.query.index].children.map(item => {
          let obj = {
            text: item.cat_name,
            value: value
          }
          value++
          Object.assign(item, obj)
          return item
        })
        this.thirdList = this.secondList[0].children;
        this.cat_id = this.thirdList[0].cat_id
        let params = {
          pagenum: 1,
          pagesize: 100000
        }
        this.axios.get('goods', { params }).then(res => {
          this.allGoods = res.data.data.goods
          console.log(this.allGoods);
          this.goodsList = this.allGoods.filter((item, index) => {
            return item.cat_id == this.cat_id
          })
          console.log(this.goodsList);
        })

      })
    },
    //获取产品数据
    // queryProduct() {
    //   let data = {
    //     page: 1,
    //     pageSize: 100,
    //     productCategoryId: this.categoryId,
    //   };
    //   //调用获取产品数据的方法
    //   this.getAllProductData(data);
    // },
    //切换侧边栏获取对应的产品数据
    secondChange(index) {
      this.thirdList = this.secondList[index].children;
      this.activeKey = 0
      this.thirdChange(0)
    },
    thirdChange(index) {
      //当侧边栏切换时 动态更新 categoryId
      this.cat_id = this.thirdList[index].cat_id
      this.goodsList = this.allGoods.filter((item, index) => {
        return item.cat_id == this.cat_id
      })
      console.log(this.goodsList);
    },
    //监听步进器的数量变化
    // numberChangeHandler(product) {
    //   //定义一个产品参数
    //   let orderLine = {
    //     productId: product.id,
    //     productName: product.name,
    //     price: product.price,
    //     number: product.number,
    //   };
    //   //调用添加购物车的方法
    //   this.addShopcart(orderLine);
    // },
    //根据条件模糊查询产品信息
    // queryCategoryData() {
    //   //定义参数
    //   let data = {
    //     page: 1,
    //     pageSize: 100,
    //   };
    //   //调整vuex中定义好的方法
    //   this.getAllCategoryData(data);
    // },
    onSubmit(total) {
      this.$router.push({
        name: "orderConfirm",
      });
    },
    //返回按钮
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    //自动获取产品栏目数据
    // this.queryCategoryData();
    //获取产品数据
    // this.queryProduct();
    this.queryCategory()
  },
};
</script>

<style scoped>
.content {
  display: flex;
}
.content .vanSider {
  width: 120px;
  text-align: center;
}
.content .right {
  flex: 1;
}
.bottom {
  position: fixed;
  bottom: 55px;
  width: 100%;
  height: 50px;
}
.bottom div {
  position: relative;
}
</style>